<template>
  <div class="editData-wrapper">
    <el-dialog
      title="修改数据项"
      :close-on-click-modal="false"
      :visible.sync="editPageDataVisible">
      <div>
        <el-form :model="inputForm"
                 ref="inputForm" v-loading="loading"
                 class="editData-form"
                 :class="method==='view'?'readonly':''"
                 :disabled="method==='view'"
                 :rules="rules"
                 label-width="137px">
          <el-form-item disabled="true" label="数据项标识码：">
            <el-input v-model="inputForm.itemSn" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item  label="标签名称：" prop="itemLable" required>
            <el-input v-model="inputForm.itemLable"></el-input>
          </el-form-item>
          <el-form-item label="组件类型：">
            <template slot-scope="scope">
              <el-select clearable :disabled="true" v-model="inputForm.itemFormat">
                <el-option
                  label="---请选择---"
                  :value="0"></el-option>
                <el-option
                  v-for="item in $dictUtils.getDictList('componentType')"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="页面控制:" required>
            <template slot-scope="scope">
              <el-checkbox-group v-model="pageControl">
                <el-checkbox label="禁用"></el-checkbox>
                <el-checkbox label="只读"></el-checkbox>
                <el-checkbox label="必填"></el-checkbox>
              </el-checkbox-group>
            </template>
          </el-form-item>
          <el-form-item v-if="inputForm.itemFormat === 1 || inputForm.itemFormat === 2 || inputForm.itemFormat === 3" label="业务数据字典:" required class="sort-num">
            <template slot-scope="scope">
              <el-select clearable v-model="inputForm.itemDictCode">
                <el-option label="数据字典" v-for="(item,index) in $dictUtils.getList()"  :value="index" :label="index">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="默认值:" prop="itemDefaultType">
            <template slot-scope="scope">
              <el-select clearable :disabled="true" v-model="inputForm.itemDefaultType" @change="changeItemDefaultType" placeholder="请选择">
                <el-option
                  v-for="item in itemDefaultTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item v-if="inputForm.itemDefaultType === 1" prop="itemDefaultValue" class="content-more">
            <template slot-scope="scope">
              <el-input v-model="inputForm.itemDefaultValue" placeholder="输入固定值"></el-input>
            </template>
          </el-form-item>
          <el-form-item v-if="inputForm.itemDefaultType === 4" prop="itemDefaultValue" class="content-more">
            <template slot-scope="scope">
              <el-input v-model="inputForm.itemDefaultValue" placeholder="输入自定义规则"></el-input>
            </template>
          </el-form-item>
          <el-form-item label="提示语:" prop="itemTip" required>
            <el-input v-model="inputForm.itemTip"></el-input>
          </el-form-item>
<!--          <el-form-item label="校验规则:" required>-->

<!--          </el-form-item>-->
          <el-form-item label="租户权限:">
            <el-select clearable :disabled="true" v-model="inputForm.tenantAutho" placeholder="请选择">
              <el-option
                v-for="item in tenantAuthoList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序:" required>
            <el-input v-model="inputForm.sorts"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editPageDataVisible = false">取 消</el-button>
    <el-button type="primary" v-if="method != 'view'" @click="doSubmit('inputForm')" v-noMoreClick>确定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<script>
    export default {
      name: 'editPageData',
      data () {
        return {
          editPageDataVisible: false,
          loading: false,
          method: '',
          itemDefaultTypeList: [{
            value: 1,
            label: '固定值'
          }, {
            value: 2,
            label: '无'
          }, {
            value: 3,
            label: '列表第一项'
          }, {
            value: 4,
            label: '自定义'
          }],
          tenantAuthoList: [{
            value: '0',
            label: '不可见'
          }, {
            value: '1',
            label: '可见不可编辑'
          }, {
            value: '2',
            label: '可编辑'
          }],
          pageControl: [],
          inputForm: {
            id: '',
            itemSn: '',
            itemLable: '',
            itemFormat: '',
            itemTip: '',
            itemDefaultType: '',
            itemDefaultValue: '',
            itemDictCode: '',
            tenantAutho: '',
            isReadonly: '0',
            isRequired: '0',
            isDisable: '0'
          },

          rules: {
            itemLable: [{ required: true, message: '标签名不能为空', trigger: 'blur' }],
            itemTip: [{ required: true, message: '提示语不能为空', trigger: 'blur' }],
          }
        }
      },
      methods: {
      	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
        init (method, obj) {
          console.log('itemObj', obj)
          if (method === 'edit') {
            this.editPageDataVisible = true
            this.loading = false
            this.inputForm.id = obj.id
            this.$set(this.inputForm, 'itemSn', obj.itemSn)
            this.$set(this.inputForm, 'itemLable', obj.itemLable)
            this.$set(this.inputForm, 'itemFormat', obj.itemFormat)
            this.$set(this.inputForm, 'itemTip', obj.itemTip)
            this.getDateItemInfo()
          }
        },
        // 获取数据项信息
        getDateItemInfo () {
          this.loading = true
          this.$http({
            url: '/model/getPageById',
            method: 'get',
            params: {
              'id': this.inputForm.id
            }
          }).then(({
                     data
                   }) => {
            if (data.code === '200') {
              console.log('item', data)
              // this.tableDataUnselected = data.result
              this.loading = false
            }
          })
        },
        changeItemDefaultType () {
          this.inputForm.itemDefaultValue = ''
        },
        // 表单提交
        doSubmit (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if (this.pageControl.indexOf('禁用') > -1) {
                this.inputForm.isDisable = '1'
              }
              if (this.pageControl.indexOf('只读') > -1) {
                this.inputForm.isReadonly = '1'
              }
              if (this.pageControl.indexOf('必填') > -1) {
                this.inputForm.isRequired = '1'
              }
              this.inputForm.itemFormat = this.inputForm.itemFormat.toString()
              console.log('input', this.inputForm)
              this.loading = true
              this.$http({
                url: `/model/updateModelPage`,
                method: 'post',
                headers: {'Content-Type': 'application/json; charset=utf-8'},
                data: this.inputForm
              }).then(({data}) => {
                if (data && data.code === '200') {
                  this.editPageDataVisible = false
                  this.$message.success(data.message)
                  this.$emit('refreshDataList')
                }
              })
            }
          })
        }
      }
    }
</script>

<style lang="scss" scoped>
  .editData-wrapper{
    ::v-deep.el-dialog__wrapper .el-dialog{
      width: fit-content !important;
      .el-dialog__header{
        padding: 0 20px !important;
        height: 41px;
        line-height: 41px;
      }
      .el-dialog__headerbtn{
        top: 11px;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #333333;
      }
      .el-dialog__body{
        padding: 20px 50px!important;
        .editData-form{
          .el-form-item__label,.el-form-item__content{
            line-height: 32px;
          }
          .content-more .el-select{
            display: block;
            margin-bottom: 10px;
          }
          .el-select{
            width: inherit !important;
          }
          .el-input{
            height: 32px;
            width: inherit;
            input {
              height: 32px;
              width: 320px;
              border: 1px solid #AAAAAA;
              border-radius: 4px;
              color: #333333;
              padding: 0 10px !important;
            }

            input:hover, input:focus {
              border-color: #1890ff;
            }

            .el-input__inner::-webkit-input-placeholder {
              color: #999999;
            }
          }
          .el-input.is-disabled{
            input:hover, input:focus {
              border-color: #AAAAAA;
            }
          }

        }

      }
    }
  }
</style>
